<template>
  <div>
    <portal-target name="target-portal">

    </portal-target>

    <!-- 子表form显示 -->
    <div v-if="!headSwitch">
      <div v-for="(itembody, indexName) in jsondata.body" :key="indexName" :name="indexName" :title="indexName">
        <van-collapse v-model="sactiveBodyNams">
          <van-collapse-item size="large" v-for="(item, index) in jsondata.bodydata[indexName]" :key="indexName + index"
            :name="indexName + index" :title="detailTitle(indexName, item, index)">
            <van-cell-group style="border:0px;">
              <div style="border-bottom:1px solid #ebedf0" v-for="itemdata in item" :key="itemdata.ID">
                <idatetime :index="index" :itemdata="itemdata" v-if="itemdata.sUIType == 'datetime'" />
                <icode :index="index" :itemdata="itemdata" v-else-if="itemdata.sUIType == 'code'" />
                <ienum @handleFiledLink="handleFiledLink" :index="index" :itemdata="itemdata"
                  v-else-if="itemdata.sUIType == 'enum'" :jsondata="jsondata" :idobject="idobject" />
                <iref @handleFiledLink="handleFiledLink" :index="index" :itemdata="itemdata"
                  v-else-if="itemdata.sUIType == 'ref'" :clickmodel.sync="sclickmodel" :clickfrom.sync="sclickfrom"
                  :clickindexName.sync="sclickindexName" :clickindex.sync="sclickindex" :jsondata="jsondata"
                  :indexName="indexName" />
                <ibool @handleFiledLink="handleFiledLink" :index="index" :itemdata="itemdata"
                  v-else-if="itemdata.sUIType == 'bool'" :jsondata="jsondata" :idobject="idobject" />
                <ifile :index="index" :itemdata="itemdata" v-else-if="itemdata.sUIType == 'file'"
                  :jsondata="jsondata" />
                <ipicture :index="index" :itemdata="itemdata" v-else-if="itemdata.sUIType == 'picture'"
                  :jsondata="jsondata" />
                <istring @handleFiledLink="handleFiledLink" :index="index" :itemdata="itemdata"
                  v-else-if="itemdata.sUIType == 'string'" :jsondata="jsondata" :indexName="indexName"
                  :idobject="idobject" />
                <imap :index="index" :itemdata="itemdata" v-else-if="itemdata.sUIType == 'map'" :jsondata="jsondata"
                  :item="item" />
                <istring @handleFiledLink="handleFiledLink" :index="index" :itemdata="itemdata" v-else
                  :jsondata="jsondata" :indexName="indexName" :idobject="idobject" />
              </div>
              <van-button type="danger" size="small" block v-if="jsondata.bodymetadataext?.indexName?.isdel != '1'"
                style="font-size:14px; font-weight:bold;background-color: #fff;color:#ff4d4f; border-color: #fff"
                @click="delRow(indexName, index)">- 删除{{ indexName }}{{ index + 1 }}</van-button>
            </van-cell-group>
          </van-collapse-item>
        </van-collapse>
        <van-button v-if="jsondata?.optionvalue !== '否'" size="large" plain style="color:#039be5 ;border-color: #fff"
          @click="addRow(indexName)">+ 增加明细</van-button>
        <!-- <van-button v-if="jsondata.optionvalue == '是'" size="large" plain style="color:#039be5 ;border-color: #fff"
          @click="addRow(indexName)">+ 增加明细</van-button> -->
      </div>
    </div>

    <!-- 子表table显示-->
    <div v-else>
      <div v-for="(itembody, indexName) in jsondata.body" :key="indexName" :name="indexName" :title="indexName">
        <van-row type="flex" justify="space-between" align="center" style="margin:20px auto;width: 95%;">
          <van-col>
            <span style="border-left: 5px solid #409EFF;padding-left: 10px;">{{ indexName }}</span>
          </van-col>
          <van-col v-if="jsondata?.optionvalue !== '否'" style="font-size: 14px;color:#409EFF" @click="addRow(indexName)">
            + 添加一行</van-col>
          <!-- <van-col v-if="jsondata.optionvalue == '是'" style="font-size: 14px;color:#409EFF"
            @click="addRow(indexName)"> + 添加一行</van-col> -->
        </van-row>


        <vxe-table :data="jsondata.bodydata[indexName]">
          <vxe-column type="seq" width="50"></vxe-column>
          <vxe-column v-for="(itemdata, index) in jsondata.body[indexName]" :field="itemdata.sField"
            :title="itemdata.sTitle" width="150">
            <template #default="{ rowIndex }">
              <vdatetime :index="rowIndex" ref="vdatetime" :itemdata="jsondata.bodydata[indexName][rowIndex][index]"
                v-if="itemdata.sUIType == 'datetime'" :datepickershow.sync="datepickershow"
                :datetimeshow.sync="datetimeshow" :yearmonthshow.sync="yearmonthshow" />

              <!-- <vdatetime :index="rowIndex" :itemdata="jsondata.bodydata[indexName][rowIndex][index]"
                v-if="itemdata.sUIType == 'datetime'" /> -->
              <vcode :index="rowIndex" :itemdata="jsondata.bodydata[indexName][rowIndex][index]"
                v-else-if="itemdata.sUIType == 'code'" />
              <venum @handleFiledLink="handleFiledLink" :index="rowIndex"
                :itemdata="jsondata.bodydata[indexName][rowIndex][index]" v-else-if="itemdata.sUIType == 'enum'"
                :jsondata="jsondata" :idobject="idobject" />
              <vref @handleFiledLink="handleFiledLink" :index="rowIndex"
                :itemdata="jsondata.bodydata[indexName][rowIndex][index]" v-else-if="itemdata.sUIType == 'ref'"
                :clickmodel.sync="sclickmodel" :clickfrom.sync="sclickfrom" :clickindexName.sync="sclickindexName"
                :clickindex.sync="sclickindex" :jsondata="jsondata" :indexName="indexName" />
              <vbool @handleFiledLink="handleFiledLink" :index="rowIndex"
                :itemdata="jsondata.bodydata[indexName][rowIndex][index]" v-else-if="itemdata.sUIType == 'bool'"
                :jsondata="jsondata" :idobject="idobject" />
              <vfile :index="rowIndex" :itemdata="jsondata.bodydata[indexName][rowIndex][index]"
                v-else-if="itemdata.sUIType == 'file'" :jsondata="jsondata" />
              <vpicture :index="rowIndex" :itemdata="jsondata.bodydata[indexName][rowIndex][index]"
                v-else-if="itemdata.sUIType == 'picture'" :jsondata="jsondata" />
              <vstring @handleFiledLink="handleFiledLink" :index="rowIndex"
                :itemdata="jsondata.bodydata[indexName][rowIndex][index]" v-else-if="itemdata.sUIType == 'string'"
                :jsondata="jsondata" :indexName="indexName" :idobject="idobject" />
              <vmap :index="rowIndex" :itemdata="jsondata.bodydata[indexName][rowIndex][index]"
                v-else-if="itemdata.sUIType == 'map'" :jsondata="jsondata" :item="item" />
              <vstring @handleFiledLink="handleFiledLink" :index="rowIndex"
                :itemdata="jsondata.bodydata[indexName][rowIndex][index]" v-else :jsondata="jsondata"
                :indexName="indexName" :idobject="idobject" />
            </template>

          </vxe-column>

          <vxe-column width="50" title="操作" fixed="right">
            <template #default="{ rowIndex }">
              <span @click="delRow(indexName, rowIndex)">删除</span>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>


    <van-popup v-model="datepickershow" round position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="selectedDate" :min-date="minDate" />
    </van-popup>
    <van-popup v-model="datetimeshow" round position="bottom">
      <van-datetime-picker v-model="currentDate" type="datetime" @confirm="selectedDateTime" />
    </van-popup>
    <van-popup v-model="yearmonthshow" round position="bottom">
      <van-datetime-picker v-model="currentYearMonth" type="year-month" @confirm="selectedYearMonth" />
    </van-popup>




  </div>

</template>
<script>
import Vue from 'vue'
import useInput from '@/utils/useinput'
import usevInput from '@/utils/usevinput'


Vue.use(useInput).use(usevInput)

export default {

  props: {

    jsondata: {
      type: Object,
      default: {
        bodydata: {},
        body: [],
        bodymetadata: {},
        headmetadata: {}
      }
    },
    detailTitle: {
      type: Function,
      default: () => { }
    },

    addRow: {
      type: Function,
      default: () => { }
    },

    delRow: {
      type: Function,
      default: () => { }
    },

    activeBodyNams: {
      type: Array,
      default: []
    },


    handleFiledLink: {
      type: Function,
      default: () => { }
    },
    idobject: {
      type: String,
      default: ""
    },
    clickindexName: {
      type: String,
      default: ""
    },
    clickfrom: {
      type: String,
      default: ""
    },
    clickindex: {
      type: Number,
      default: 0
    },
    clickmodel: {
      type: Object,
      default: () => { }
    },
    isShowBodyAddBtn: {
      type: Boolean,
      default: true
    },

  },

  computed: {
    headSwitch() {

      const { headmetadata } = this.jsondata
      if (headmetadata) {
        return headmetadata.lFlatDisplay
      }


    },

  },
  data() {
    return {
      hiddenBodyAddBtnObjectArr: ['代理协议发出目标明细', '代理协议推广目标明细'],
      sclickindex: 0,
      sclickfrom: "",
      sclickmodel: {},
      sclickindexName: "",
      sactiveBodyNams: [],

      // datatime

      minDate: new Date(1900, 0, 1),

      yearmonthshow: false,
      datepickershow: false,
      datetimeshow: false,

      currentDate: new Date(),
      currentYearMonth: new Date(),
    }
  },
  watch: {
    sactiveBodyNams: {
      handler(value) {
        this.$emit("update:activeBodyNams", value)
      },
      immediate: true
    },
    sclickindex: {
      handler(value) {
        this.$emit("update:clickindex", value)
      },
      immediate: true
    },

    sclickfrom: {
      handler(value) {
        this.$emit("update:clickfrom", value)
      },
      immediate: true
    },

    sclickmodel: {
      handler(value) {
        this.$emit("update:clickmodel", value)
      },
      immediate: true
    },

    sclickindexName: {
      handler(value) {
        this.$emit("update:clickindexName", value)
      },
      immediate: true
    },





    clickindex: {
      handler(value) {
        this.sclickindex = value

      },
      immediate: true
    },

    clickfrom: {
      handler(value) {
        this.sclickfrom = value
      },
      immediate: true
    },

    clickmodel: {
      handler(value) {
        this.sclickmodel = value
      },
      immediate: true
    },

    clickindexName: {
      handler(value) {
        this.sclickindexName = value
      },
      immediate: true
    },


  },
  methods: {
    selectedDate() {
      this.$refs.vdatetime[0].selectedDate(this.currentDate)
    },
    selectedDateTime() {
      this.$refs.vdatetime[0].selectedDateTime(this.currentDate)
    },
    selectedYearMonth() {
      this.$refs.vdatetime[0].selectedYearMonth(this.currentYearMonth)
    }

  }

}


</script>
<style></style>